import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'package:get/get.dart';
import 'package:signage/app/routes/app_pages.dart';
import 'package:signage/l10n/l10n.dart';
import '../controllers/register_controller.dart';

class RegisterView extends GetView<RegisterController> {
  const RegisterView({super.key});
  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    
    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: [
          Image.asset(
            'assets/images/title_bar_bg.png',
            width: double.infinity,
            fit: BoxFit.fitHeight
          ),
          SingleChildScrollView(
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 24.w),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  60.verticalSpace,
                  Image.asset(
                    'assets/images/Group 1321318868@3x.png',
                    width: 96,
                    height: 96
                  ),
                  70.verticalSpace,
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      l10n.translate('welcome_to_app'),
                      style: TextStyle(
                        fontSize: 24.sp,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  16.verticalSpace,
                  TextField(
                    onChanged: (value) => controller.phoneNumber.value = value,
                    keyboardType: TextInputType.phone,
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: const Color.fromARGB(255, 247, 247, 247),
                      hintText: l10n.translate('enter_phone'),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(36),
                        borderSide: BorderSide.none,
                      ),
                      contentPadding: const EdgeInsets.symmetric(horizontal: 16),
                    ),
                  ),
                  16.verticalSpace,
                  Row(
                    children: [
                      Expanded(
                        child: TextField(
                          onChanged: (value) => controller.verificationCode.value = value,
                          keyboardType: TextInputType.number,
                          decoration: InputDecoration(
                            filled: true,
                            fillColor: const Color.fromARGB(255, 247, 247, 247),
                            hintText: l10n.translate('enter_verification_code'),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(36),
                              borderSide: BorderSide.none,
                            ),
                            contentPadding: const EdgeInsets.symmetric(horizontal: 16),
                          ),
                        ),
                      ),
                      12.horizontalSpace,
                      Obx(() => TextButton(
                        onPressed: controller.canGetCode.value 
                          ? controller.getVerificationCode 
                          : null,
                        child: Text(
                          controller.canGetCode.value 
                            ? l10n.translate('get_verification_code')
                            : '${controller.countdown}s',
                          style: TextStyle(
                            fontSize: 14,
                            color: Color(0xFF666666),
                          ),
                        ),
                      )),
                    ],
                  ),
                  24.verticalSpace,
                  Obx(() => SizedBox(
                    width: double.infinity,
                    height: 50,
                    child: ElevatedButton(
                      onPressed: controller.canLogin() ? controller.login : null,
                      style: ElevatedButton.styleFrom(
                        backgroundColor: const Color.fromRGBO(252, 207, 1, 1),
                        disabledBackgroundColor: const Color.fromRGBO(255, 232, 128, 1),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(36),
                        ),
                      ),
                      child: Text(
                        l10n.translate('confirm'),
                        style: TextStyle(
                          fontSize: 16,
                          color: const Color.fromRGBO(51, 51, 51, 1),
                        )
                      ),
                    ),
                  )),
                  16.verticalSpace,
                  SizedBox(
                    width: double.infinity,
                    height: 50,
                    child: ElevatedButton(
                      onPressed: () => Get.offAndToNamed(Routes.LOGIN),
                      style: ElevatedButton.styleFrom(
                        backgroundColor: const Color.fromRGBO(252, 207, 1, 1),
                        disabledBackgroundColor: const Color.fromRGBO(255, 232, 128, 1),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(36),
                        ),
                      ),
                      child: Text(
                        l10n.translate('have_account'),
                        style: TextStyle(
                          fontSize: 16,
                          color: const Color.fromRGBO(51, 51, 51, 1),
                        )
                      ),
                    ),
                  ),
                  16.verticalSpace,
                  Row(
                    children: [
                      Obx(() => Checkbox(
                        side: const BorderSide(
                          color: Color.fromRGBO(204, 204, 204, 1),
                          width: 1,
                        ),
                        activeColor: const Color.fromRGBO(252, 207, 1, 1),
                        checkColor: Colors.black,
                        value: controller.agreedToTerms.value,
                        onChanged: (value) {
                          controller.agreedToTerms.value = value ?? false;
                        },
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(180),
                        ),
                      )),
                      SizedBox(
                        width: Get.width - 100.w,
                        child: Text.rich(
                          TextSpan(
                            text: AppLocalizations.of(context)!.translate('agree_to'),
                            style: TextStyle(fontSize: 14.sp),
                            children: [
                              TextSpan(
                                text: AppLocalizations.of(context)!.translate('user_agreement'),
                                style: TextStyle(
                                  color: Color(0xFFFFD149),
                                  fontSize: 14.sp,
                                ),
                                recognizer: TapGestureRecognizer()
                                  ..onTap = () {
                                    Get.toNamed(Routes.TEXT_SHOW,
                                        arguments: {'title': AppLocalizations.of(context)!.translate('user_agreement')});
                                  },
                              ),
                              TextSpan(
                                text: AppLocalizations.of(context)!.translate('and'),
                                style: TextStyle(fontSize: 14.sp),
                              ),
                              TextSpan(
                                text: AppLocalizations.of(context)!.translate('privacy_policy'),
                                style: TextStyle(
                                  color: Color(0xFFFFD149),
                                  fontSize: 14.sp,
                                ),
                                recognizer: TapGestureRecognizer()
                                  ..onTap = () {
                                    Get.toNamed(Routes.TEXT_SHOW,
                                        arguments: {'title': AppLocalizations.of(context)!.translate('privacy_policy')});
                                  },
                              ),
                            ],
                          ),
                          softWrap: true,
                          overflow: TextOverflow.visible,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

}
